<template>
	<view class="guang_box">
		<!-- 广告 -->
		<view class="guang_con">
			<image src="../../public/images/guang.jpg" mode=""></image>
		</view>

		<!-- 跳转首页 -->
		<view class="toIndex" @click="toIndexs">
			<text>跳过广告</text>
			<text>{{num}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	let num = ref(3)

	let times = setInterval(() => {
		num.value--
		if (num.value <= 0) {
			clearInterval(times)
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	}, 1000)
	const toIndexs = () => {
		clearInterval(times)
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="less" scoped>
	.guang_box {
		width: 750rpx;
		height: 100%;

		.guang_con {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.toIndex {
			width: 220rpx;
			background-color: rgba(0, 0, 0, 0.4);
			color: white;
			position: fixed;
			top: 80rpx;
			left: 40rpx;
			display: flex;
			border-radius: 50px;
			justify-content: center;
			// align-items: center;
			padding: 15rpx 0;

			text {
				font-size: 28rpx;
				flex-shrink: 0;
			}

			text:nth-child(1) {
				margin-right: 15rpx;
			}
		}
	}
</style>